<template>
  <div>
    <a-row :gutter="24" >
        <a-card v-for="f of files" :title="f.name" :key="f.name" :bordered="false" style="width: 90%;margin-bottom: 0.5%">
          <!-- 在 Vue 3 中使用 v-slot 替代 slot -->
          <template #extra>
            <div style="display: flex; gap: 8px;">
              <a-select allowClear  showSearch style="width: 15vw" size="small" placeholder="下游客户"
                        :filter-option="false"
                        @search="(value) => queryParams.searchText[f.name]=value"
                        :options="customizedFilterOptions(queryParams.searchText[f.name], groupedTradePartners)"
                        dropdownClassName="custom-dropdown"
                        v-model:value="queryParams.id_trader[f.name]">
              </a-select>
              <a-select style="width: 15vw" size="small" placeholder="入帐公司" v-model:value="queryParams.id_myCompany[f.name]" :options="companies">
              </a-select>
            </div>
          </template>
        </a-card>
    </a-row>
    <a-row :gutter="24">
      <a-col :offset="10">
        <a-button  type="primary" @click="nextStep">下一步</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { customizedFilterOptions } from '@/utils/my.js';
// 定义 props
const props = defineProps(['checkData', 'files', 'groupedTradePartners', 'companies', 'queryParams']);
// 定义 emits
const emit = defineEmits(['nextStep']);
const searchTextForTraders = ref('');
// 定义表格列配置
const columns = ref([
  {
    title: '主单号',
    dataIndex: '主单号',
  },
  {
    title: '日期',
    dataIndex: '日期',
  },
  {
    title: '总金额',
    dataIndex: '总金额',
    align: 'right',
  },
  {
    title: '总金额[系统]',
    dataIndex: 'total_amount',
    align: 'right',
  },
  {
    title: '计费重量',
    dataIndex: '计费重量',
    align: 'right',
  },
  {
    title: '计费重量[系统]',
    dataIndex: 'weight',
    align: 'right',
  },
]);

// 定义下一步方法
const nextStep = () => {
  // 检查下游客户信息是否选择完整
  if (Object.keys(props.queryParams.id_trader).length !== props.files.length) {
    message.warning("请选择客户信息，不能为空！");
    return;
  }
  // 检查入帐公司信息是否选择完整
  if (Object.keys(props.queryParams.id_myCompany).length !== props.files.length) {
    message.warning("请选择入帐公司信息，不能为空！");
    return;
  }
  // 触发下一步事件
  emit('nextStep');
};
</script>

